<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
					ul{
						/* border: 1px solid red; */
						height: 50px;
						width: 300px;
						margin: 0;
						padding: 0;
					}
					ul li{
						list-style: none;
						float: left;
						/* border: 1px solid red; */
						width: 80px;
						height: 50px;
						line-height: 50px;
						text-align: center;
						margin-right: 15px;
						background-color: #939393;
					}
					div{
						/* border: 1px solid red; */
						height: 500px;
						width: 800px;
						background-color: blue;
						line-height: 500px;
						text-align: center;
					}
				</style>
	</head>
	<body>
		<script>
					$(function(){
						$("#tab1").click(function(){
							$("#tab1").css("background-color","blue").siblings().css("background-color","#939393");
							$("#big").html("tab文字内容1");
						});
						$("#tab2").click(function(){
							$("#tab2").css("background-color","blue").siblings().css("background-color","#939393");
							$("#big").html("tab文字内容2");
						});
						$("#tab3").click(function(){
							$("#tab3").css("background-color","blue").siblings().css("background-color","#939393");
							$("#big").html("tab文字内容3");
						});
					});
					
				</script>
			<ul>
				<li id="tap1">tap01</li>
				<li id="tap2">tap02</li>
				<li id="tap3">tap03</li>
			</ul>
		<div id="big"></div>
	</body>
</html>